class Announcement {
    constructor(title, context, time, delay) {
        this.title = title;
        this.context = context;
        this.time = time;
        this.delay = delay;
    }

    warning() {
        this.init()
        let aa = document.querySelectorAll('.announcement-header')
        aa[aa.length-1].classList.add('warning')
    }

    success() {
        this.init()
        let aa = document.querySelectorAll('.announcement-header')
        aa[aa.length-1].classList.add('success')
    }

    info() {
        this.init()
        let aa = document.querySelectorAll('.announcement-header')
        aa[aa.length-1].classList.add('info')
    }

    // 创建容器
    createbox() {
        let temp = document.querySelector('.announcement-container')
        if(temp) {
            return
        }
        this.createEle('div', {'class':'announcement-container'}, {
            'position': 'fixed',
            'top': '20px',
            'right': '20px',
            'width': '250px',
            'z-index': '1000'
        }, document.body)
    }

    // 初始化并渲染窗口
    init() {
        this.createbox()
        let announcementContainer = document.querySelector('.announcement-container')

        // 创建公告元素
        let announcement = this.createEle('div', {'class':'announcement'}, {
            'position': 'relative',
            'background': 'white',
            'border-radius': '8px',
            'box-shadow': '0 4px 12px rgba(0, 0, 0, 0.08)',
            'overflow': 'hidden',
            'margin-top': '20px',
            'opacity': '0', // 初始状态透明
            'transform': 'translateX(100%)', // 初始状态从右侧移入
            'transition': 'all 0.7s ease-out',
            'transition-delay' : `${this.delay}ms`
        }, announcementContainer)

        this.delay += 300; // 一个实例对象中自动延迟300ms

        // 创建公告头部
        let announcementHeader = this.createEle('div', {'class':'announcement-header'}, {
            'display': 'flex',
            'align-items': 'center',
            'padding': '14px 16px',
            'border-bottom': '1px solid rgba(0, 0, 0, 0.05)',
            'height': '15px',
            'transition': 'background-color 0.3s ease'
        }, announcement)

        // 创建铃铛图标
        let bellIcon = this.createEle('div', {'class':'bell-icon'}, {
            'width': '24px',
            'height': '24px',
            'margin-right': '12px',
            'position': 'relative'
        }, announcementHeader)

        // 创建公告标题
        let announcementTitle = this.createEle('div', {'class':'announcement-title'}, {
            'font-size': '15px',
            'font-weight': '600',
            'flex-grow': '1',
            'transition': 'color 0.3s ease'
        }, announcementHeader)
        announcementTitle.innerHTML = this.title;

        // 创建关闭按钮
        let announcementClose = this.createEle('button', {'class':'announcement-close'}, {
            'background': 'none',
            'border': 'none',
            'width': '20px',
            'height': '20px',
            'display': 'flex',
            'align-items': 'center',
            'justify-content': 'center',
            'color': 'white',
            'cursor': 'pointer',
            'transition': 'all 0.2s',
            'flex-shrink': '0'
        }, announcementHeader)
        announcementClose.innerHTML = '×';

        // 添加关闭事件（带动画）
        announcementClose.addEventListener('click', (e) => {
            announcement.style.transform = 'translateX(100%)';
            announcement.style.opacity = '0';
            setTimeout(() => {
                announcement.remove();
            }, 700);
        });

        // 创建公告内容
        let announcementContent = this.createEle('div', {'class':'announcement-content'}, {
            'padding': '16px',
            'font-size': '14px',
            'line-height': '1.5',
            'color': '#666',
            'min-height': '60px'
        }, announcement)
        announcementContent.innerHTML = this.context;

        // 创建公告时间
        let announcementTime = this.createEle('div', {'class':'announcement-time'}, {
            'padding': '0 16px 12px',
            'font-size': '12px',
            'text-align': 'right',
            'color': '#999'
        }, announcement)
        announcementTime.innerHTML = this.time;

        // 触发入场动画
        setTimeout(() => {
            announcement.style.transform = 'translateX(0)';
            announcement.style.opacity = '1';
        }, 10);

        // 添加CSS样式
        this.addStyles();
    }

    // 创建元素的方法
    createEle(nodeName, attributes, styles, parent = null) {
        let target = document.createElement(nodeName);

        // 设置属性
        for (let attr in attributes) {
            if (attributes.hasOwnProperty(attr)) {
                target.setAttribute(attr, attributes[attr]);
            }
        }

        // 设置样式
        for (let style in styles) {
            if (styles.hasOwnProperty(style)) {
                target.style[style] = styles[style];
            }
        }

        // 添加到父节点
        if (parent) {
            parent.appendChild(target);
        }

        return target;
    }

    // 添加CSS样式
    addStyles() {
        // 检查是否已添加样式
        if (document.getElementById('announcement-styles')) {
            return;
        }

        const style = document.createElement('style');
        style.id = 'announcement-styles';
        style.textContent = `
        .bell-icon::before {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            border: 2px solid #ff9800;
            border-radius: 50% 50% 0 0;
            border-bottom: none;
            top: 2px;
            left: 4px;
        }

        .bell-icon::after {
            content: "";
            position: absolute;
            width: 4px;
            height: 4px;
            background: #ff9800;
            border-radius: 50%;
            bottom: 2px;
            left: 10px;
        }

        /* 警告样式 - 马卡龙桃红色 */
        .warning {
            background-color: #ff7f9c; /* 桃红色 */
        }
        .warning .announcement-title {
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }

        /* 成功样式 - 马卡龙薄荷绿色 */
        .success {
            background-color: #a8e6cf; /* 薄荷绿色 */
        }
        .success .announcement-title {
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }

        /* 信息样式 - 马卡龙天蓝色 */
        .info {
            background-color: #b3cde0; /* 天蓝色 */
        }
        .info .announcement-title {
            color: #fff;
            text-shadow: 0 1px 1px rgba(0,0,0,0.2);
        }

        /* 关闭按钮悬停效果 */
        .announcement-close:hover {
            transform: scale(1.2);
            color: #fff !important;
        }

        /* 公告悬停效果 */
        .announcement:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
        }
    `;
        document.head.appendChild(style);
    }
}